This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
File Based Routing with Expo Router
Learn about Expo Router, a file-based solution for React Native and web apps, enabling seamless navigation across screens using uniform components on Android, iOS, and web....
Jan 10, 2024
8 mins
Setting Up React Navigation in Expo Web: A Practical Guide
In this blog post, we tackle issues we faced while working with React navigation mainly on the web, due to routing being different in how it is handle on both web and mobile....
Jun 5, 2023
5 mins
Introducing the new Expo, Styled Components, and Zustand Starter Kit
Intro We are delighted to announce our brand new Expo React Native starter kit to our Starter.dev kits collection. We built this starter kit to enable our team members who work mostly with web technologies to make an easy transition for them to work on native mobile apps with their current knowledge without any extra effort. This Starter kit contains: - Expo a React native wrapper. - Styled Components lets you write actual CSS in your JavaScript-like web. - Zustand A small, fast, and scalable barebones state-management solution. - TypeScript JavaScript with syntax for types. - Jest is a delightful JavaScript Testing Framework with a focus on simplicity. - React Navigation Routing and navigation for Expo and React Native apps. Problems This Kit Addresses React Native Styling One of the most difficult things for React Native beginners is its styling system. It's difficult for people who come from a web background because it’s not similar to CSS at all. It has different units, and each property accepts a different value. For more information visit React Native Style Documentation styled-components/native fixed that problem, you literally write CSS like for web and it translates the CSS code to a React Native Styles without any extra effort. Share Components Across Platforms Thanks to the Expo team, we can use the React Native components cross-platform, even with frameworks like Next.js. This saves teams a lot of work. Instead of building the same feature twice, one for the web and the other for the mobile apps, we only build it once. Let me show you an example: A lot of libraries in the React ecosystem use the setImmediate() API (like react-native-reanimated). It’s a method used to break up long-running operations, and run a callback function immediately after the browser has completed other operations such as events and display updates, which Next.js doesn't polyfill by default. To fix this, you can polyfill it yourself. First, we need to install set immediate package yarn add setimmediate Then import it in the app root pages/_app.js import 'setimmediate'; Use the @expo/next-adapter in the next.config.js ` Add image support with next-images ` Add font support with next-fonts ` Now you can use your Expo React Native components in Next.js site. Skip the Tedious Steps of Installing React Navigation We use React Navigation in almost every project we work on, it’s a necessary piece of the app, so we already set it up so you can start your new app quickly. We also grouped the screens under the src/screens directory, where each screen has its own folder with its related files. Defining a better organization pattern for components to scale your app We structured this project from our experiences with big React projects. One challenging part of using React is that it gives the developer a lot of freedom to choose their own file structure. However this is not good on a bigger app scale, because every developer has their own way to organize the files, and with a big React project that a lot of developers are working on, we usually end up with a mess. We figured this structure out from the previous projects we built. Imagine we have a component, and this component has different files like, testing, …etc Our way to structure the components is: Each component has its own folder: ` Each folder has the component files ` The problem now is the importing sentences gonna be ugly like this: ` So it solve this, we add in each Component folder an index.ts file with the following: ` Now the folder structure will look like this: ` Now the import sentence will be much cleaner: ` This can help keep your files and folders organized, and help scale your codebase with time. Conclusion This starter kit is the result of a lot of experience we gained on React projects we built internally and for clients. It helps you to start quickly without going through the tedious task of installing and setting up dev tools, and at the same time, it helps your app scale more easily....
Apr 26, 2023
4 mins
State of React Wrap-up | April 26, 2022
In this State of React event, the main topic centered around the React 18 release. Our panelists had a lot of thoughts on the release, the latest features, and the React working group....
May 3, 2022
6 mins